<!DOCTYPE HTML>
<html>
   <head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>知果汇</title>
		<link href="_CSS_/bootstrap.min.css" rel="stylesheet">
		<link href="_CSS_/simple-line-icons.css" rel="stylesheet">
		<link href="_CSS_/font-awesome.min.css" rel="stylesheet">
		<link href="_CSS_/jasny-bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="_CSS_/nanoscroller.css">
		<link href="_CSS_/style.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="_CSS_/jquery-ui.css">
		<!--[if lt IE 9]>
		  <script src="_JS_/html5shiv.min.js"></script>
		  <script src="_JS_/respond.min.js"></script>
		<![endif]-->
	   <style type="text/css">
		   body{background-color: #ffffff;}
		   .row{margin-left: 0px;margin-right: 0px;}
		   .radio-box{display:inline-block;width: 64px;}
		   .formControls{padding-right:50px; position: relative;}
		   .textarea {height: 100px;resize: none;font-size: 14px;padding: 4px;}
		   .textarea-numberbar {position: absolute;right: 70px;bottom: 5px;z-index: 1;margin-bottom: 0;}
		   .upload-btn {width: 120px;height: 90px;margin: 0;border: 1px dashed #a9a9a9;}
		   .upload-btn img{
			   display: block;
			   width: 50px;
			   height: 35px;
			   margin-top: 10px;
			   margin-left: 35px;

		   }
		   .upload-btn input{
			   position: absolute;
			   top: 0;
			   margin: 0;
			   width: 120px;
			   height: 90px;
			   border: none;
			   opacity: 0;
			   filter: alpha(opacity=0);
			   cursor: pointer
		   }
		   .upload-img{width:120px;height: 90px;}
		   .upload-img p {
			   width: 120px;
			   font-size: 10px;
			   line-height: 16px;
			   margin-top: -35px;
			   text-align: center;
		   }
		   .img-info img{
			   width: 120px;
			   height: 90px;
		   }
		   .file-panel {
			   position: absolute;
			   display: none;
			   width: 120px;
			   height: 90px;
			   top: 0;
			   overflow: hidden;
			   z-index: 300;
		   }
		   .cancel {
			   width: 120px;
			   height: 90px;
			   background-color: rgba( 0, 0, 0, 0.5 );
		   }
		   .table-btn,.table-btn:hover,.table-btn:focus{color: #ffffff;}
	   </style>
    </head>
	<body>
	<article class="page-container">
		<form class="form form-horizontal" id="form-admin-add">
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">师资姓名：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="" placeholder="" id="talentname" name="talentname">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">性别：</label>
				<div class="formControls col-xs-8 col-sm-9 skin-minimal">
					<div class="radio-box">
						<input name="sex" type="radio" id="sex-1" value="1" checked>
						<label for="sex-1">男</label>
					</div>
					<div class="radio-box">
						<input type="radio" id="sex-2" name="sex" value="0">
						<label for="sex-2">女</label>
					</div>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">上传照片：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<div class="upload-img">
						<div class="upload-btn">
							<img src="_IMG_/upload.jpg">
							<input type="file" name="img" id="file_img" onchange="previewImage(this,1)" accept="image/gif, image/jpeg, image/png" />
						</div>
						<p>上传照片大小不超过3M</p>
					</div>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">师资标签：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="" placeholder="" id="label" name="label">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">职务：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="" placeholder="" id="duties" name="duties">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">所在省市：</label>
				<div class="formControls col-xs-8 col-sm-9"> <span class="select-box" style="width:150px;">
					<select class="select" id="area" name="area" size="1">

					</select>
					</span> 
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">研究领域：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="" placeholder="" name="field" id="field">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">工作单位：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<input type="text" class="input-text" value="" placeholder="" name="workplace" id="workplace">
				</div>
			</div>

			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">师资库类别：</label>
				<div class="formControls col-xs-8 col-sm-9"> <span class="select-box" style="width:150px;">
					<select class="select" id="talentrole" name="talentrole" size="1">
						<option value="4">高级教授</option>
						<option value="5">高级讲师</option>
					</select>
					</span> 
				</div>
			</div>
			
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">主要学术著作及论文：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<textarea name="composition" id="composition" cols="" rows="" class="textarea"  placeholder="说点什么...150个字符以内" dragonfly="true" onKeyUp="textarealength(this,150)"></textarea>
					<p class="textarea-numberbar"><em class="textarea-length">0</em>/150</p>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">国内外学术团体任职情况：</label>
				<div class="formControls col-xs-8 col-sm-9">
					<textarea name="office" id="office" cols="" rows="" class="textarea"  placeholder="说点什么..." dragonfly="true" ></textarea>

				</div>
			</div>
			<div class="row cl">
				<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
					<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;保存并发布&nbsp;&nbsp;">
					<input class="btn btn-warning radius" type="submit" value="&nbsp;&nbsp;保存为草稿&nbsp;&nbsp;">
					<input class="btn btn-cancel radius" style="color: #ffffff;background-color: #a0a0a0;" type="button" value="&nbsp;&nbsp;取消&nbsp;&nbsp;">
				</div>
			</div>
		</form>
	</article>

	<script src="_JS_/jquery.min.js"></script>
	<script src="_JS_/bootstrap.min.js"></script>
	<script src="_JS_/jquery.base64.js"></script>
	<script src="_JS_/jquery.cookie.js"></script>
	<script src="_JS_/jasny-bootstrap.min.js"></script>
	<script src="_JS_/jquery.slimscroll.min.js"></script>
	<script src="_JS_/jquery.nanoscroller.min.js"></script>
	<script src="_JS_/metismenu.min.js"></script>
	<script src="_JS_/float-custom.js"></script>
	<script type="text/javascript" src="_JS_/layer/layer.js"></script>
	<script type="text/javascript" src="_JS_/jquery.validation/1.14.0/jquery.validate.min.js"></script>
	<script type="text/javascript" src="_JS_/jquery.validation/1.14.0/validate-methods.js"></script>
	<script type="text/javascript" src="_JS_/jquery.validation/1.14.0/messages_zh.min.js"></script>
	<script type="text/javascript" src="_JS_/jquery.form.js"></script>

	<script type="text/javascript">
	/*textarea 字数限制*/
	function textarealength(obj,maxlength){
		var v = $(obj).val();
		var l = v.length;
		if( l > maxlength){
			v = v.substring(0,maxlength);
			$(obj).val(v);
		}
		$(obj).parent().find(".textarea-length").text(v.length);
	}
	var url=window.location.href;
	user_id = url.split("#")[1];
	sheet=2;

	$(function(){
		$.ajax({
			type: "get",
			url:"{:url('api/talent/province')}",
			data:{'sheet':sheet},
			dataType: 'jsonp',
			jsonp:'callback',
			success: function (msg) {
				if(msg.code == 200){
					var html="";
					for(var i=0;i<msg.data.provice.length;i++){
						html +='<option value="'+msg.data.provice[i].id+'">'+msg.data.provice[i].province+'</option>';
					}
					$("#area").append(html);

				}
				if(msg.code==1000){
					layer.msg('查询失败!',{icon:1,time:1000});
				}
			}
		});

		$("#form-admin-add").validate({
			rules:{
				talentname:{
					required: true,
					minlength: 2,
					//异步验证 开始
					remote: {
						url: "{:url('api/talent/talentname')}",//发送请求的url地址
						type: "post", //请求方式
						dataType: "json",//接收的数据类型
						data: {
							talentname: function () {
								return $("#talentname").val();
							}
						},
						dataFilter: function (data) { //过滤返回结果
							if (data == "true"){
								return true;  //true代表用户名还未存在
							}else{
								return false; //false代表用户名已经存在
							}
						}
					}
					//异步验证 结束
				},
				sex:{
					required:true,
				},
				img:{
					required:true,
				},
				label:{
					required:true,
				},
				duties:{
					required:true,
				},
				area:{
					required:true
				},
				field:{
					required:true
				},
				workplace:{
					required:true,
				},
				talentrole:{
					required:true,
				},
				composition:{
					required:true,
				},
				office:{
					required:true,
				},
			},
			messages: {
				talentname: {
					required: "请输入用户名",
					minlength: "用户名必需由两个字母组成",
					remote: "输入的用户名已经存在"
				},
				img:{
					required:"请上传图片",
				},
			}
			/*onkeyup:false,
			focusCleanup:true,
			success:"valid",
			submitHandler:function(form){


			}*/


		});


		$(".btn-cancel").click(function(){
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		});
	});
	/*发布按钮*/
	$('.btn-primary').on('click',function(){
		button(1);
	});
	/*保存按钮*/
	$('.btn-warning').on('click',function(){
		button(2);
	});
	function button(status){
		var talentname=$('#talentname').val();
		var img=$('#file_img').val();
		var label=$('#label').val();
		var duties=$('#duties').val();
		var field=$('#field').val();
		var workplace=$('#workplace').val();
		var composition=$('#composition').val();
		var office=$('#office').val();
		uid=user_id;
		if(talentname!=""&&img!=""&&label!=""&&duties!=""&&field!=""&&workplace!=""&&composition!=""&&office!=""&&uid!=""&&!isNaN(uid)){
			$("form").ajaxSubmit({
				type: "post",
				url: "{:url('api/talent/talent_add')}",
				dataType:"json",
				data:{'uid':user_id,'status':status,'sheet':sheet},
				success: function (msg) {
					if(msg.code == 200){
						layer.msg('添加成功!',{icon:1,time:1000});
						parent.window.location.reload();
					}else{
						layer.msg('添加失败!',{icon:2,time:1000});
					}
				}
			});
		}else{
			layer.msg('请完善发布内容!',{icon:0,time:1000});
		}
	}
	/* 图片上传*/
	function previewImage(obj,num){
		var filepath=$(obj).val();
		fileObj = document.getElementById('file_img');
		value = window.URL.createObjectURL(fileObj.files[0]);
		file_size = obj.files[0].size;
		size = file_size / 1024;
		if (size > 1024*2) {
			$('#file_img').val("");
			layer.alert('上传图片不得大于2MB', {
				closeBtn: 0
			});
		} else {
			$(obj).parents(".upload-img").prepend('<div class="img-info"><img src="'+value+'"/><div class="file-panel"><div title="删除图片" class="cancel"><a class="btn table-btn" style="font-size:18px;margin-top:50px;margin-left:76px;" title="删除图片" href="javascript:;"><i class="fa fa-trash-o"></i></a></div></div></div>');
			$(obj).parent(".upload-btn").hide();
			$(obj).parents(".upload-img").children('p').hide();

			$('.img-info').hover(function(){
				$(this).find(".file-panel").show();
			},function(){
				$(this).find(".file-panel").hide();

			});
			$(".cancel").on("click",function(){
				$('#file'+num).val("");
				$(this).parents('.upload-img').find(".upload-btn").show();
				$(this).parents('.upload-img').find(".upload-img p").show();
				$(this).parents(".img-info").remove();

			});
		}
	}
	
	</script> 
</body>
</html>